<template>
  <div>
    <page-table
      rowKey="userGroupRoleId"
      ref="userGroupRolePageTable"
      :query-api="userGroupRole_queryPageApi"
      :delete-api="userGroupRole_deletesApi"
      :query-param="queryParam"
      :columns="columns"
    >
      <template slot="addBtn">
        <a-button type="primary" icon="plus" @click="relationUser">关联用户</a-button>
        <a-button type="primary" icon="plus" @click="relationUnit">关联部门</a-button>
      </template>
      <template #customUserGroupTypeDesc="{text,record}">
        <a-tag :color="record.userGroupType=='USER'?'#87d068':'#f50'">{{text}}</a-tag>
      </template>
    </page-table>
    <a-modal
      title="选择部门"
      :visible="visibleUnitTree"
      @ok="addRoleUnit"
      @cancel="()=>{visibleUnitTree=false}"
    >
      <unit-tree
        v-if="visibleUnitTree"
        :edit-tree="false"
        :checkable="true"
        :disableCheckbox="disableCheckbox"
        ref="unitTree"
      />
    </a-modal>
    <a-modal
      title="选择用户"
      :visible="visibleUserTable"
      @ok="addRoleUser"
      @cancel="()=>{visibleUserTable=false}"
      :width="'80%'"
    >
      <select-user-table ref="selectUserTable" v-if="visibleUserTable" :excludeRoleId="roleId"></select-user-table>
    </a-modal>
  </div>
</template>

<script>
import {
  userGroupRole_queryPageApi,
  userGroupRole_deletesApi,
  userGroupRoleList,
  userGroupRoleInsertBatch
} from "@/api/org/userGroupRole";
import UnitTree from "@/views/org/user/component/unitTree";
const columns = [
  { title: "用户/部门名称", dataIndex: "userGroupName" },
  {
    title: "关联类型",
    dataIndex: "userGroupTypeDesc",
    scopedSlots: { customRender: "customUserGroupTypeDesc" }
  }
];
export default {
  components: { UnitTree },
  props: {
    roleId: String
  },
  data() {
    return {
      columns,
      userGroupRole_queryPageApi,
      userGroupRole_deletesApi,
      queryParam: {
        roleId: this.roleId
      },
      visibleUnitTree: false, //显示部门选择树
      visibleUserTable: false, //显示用户选择表格
      disableCheckbox: [] //已经用户当前角色的部门禁用
    };
  },
  methods: {
    reloadTable() {
      this.$refs.userGroupRolePageTable.reload();
    },
    //关联用户
    relationUser() {
      this.visibleUserTable = true;
    },
    //关联部门
    relationUnit() {
      let queryparam = { roleId: this.roleId, userGroupType: "DEPT" };
      userGroupRoleList(queryparam).then(response => {
        let { data } = response.data;
        this.disableCheckbox = data.map(obj => {
          return obj.userGroupId;
        });
        this.visibleUnitTree = true;
      });
    },
    //新增角色用户
    addRoleUser() {
      let userIds = this.$refs.selectUserTable.getSelectUserIds();
      if (userIds.length == 0) {
        this.$message.warning("请选择用户");
        return false;
      }
      let roleUsers = [];
      for (let i in userIds) {
        roleUsers.push({
          userGroupId: userIds[i],
          roleId: this.roleId,
          userGroupType: "USER"
        });
      }
      userGroupRoleInsertBatch(roleUsers).then(response => {
        this.reloadTable();
        this.visibleUserTable = false;
      });
    },
    //新增角色部门
    addRoleUnit() {
      let checkedKeys = this.$refs.unitTree.checkedKeys;
      if (checkedKeys.length == 0) {
        this.$message.warning("请选择部门");
        return false;
      }
      let roleUnits = [];
      for (let i in checkedKeys) {
        roleUnits.push({
          roleId: this.roleId,
          userGroupId: checkedKeys[i],
          userGroupType: "DEPT"
        });
      }
      userGroupRoleInsertBatch(roleUnits).then(response => {
        this.reloadTable();
        this.visibleUnitTree = false;
      });
    }
  }
};
</script>